<template>
  <a-drawer v-model:visible="visible" title="接口批量分类" placement="right" :closable="false" :after-visible-change="afterVisibleChange">
    <p>接口名称：{{ selectList }}</p
    ><br />
    接口分类： <a-input-search v-model:value="searchValue" style="margin-bottom: 8px" placeholder="Search" />
    <div class="tree">
      <a-tree :expanded-keys="expandedKeys" :auto-expand-parent="autoExpandParent" :tree-data="treeData" @expand="onExpand">
        <template #title="{ key: record, dirName, dirId, dirParents }">
          <a-dropdown :trigger="['contextmenu']">
            <span>{{ dirName }} </span>
          </a-dropdown>
        </template>
      </a-tree>
    </div>
    <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
    <a-button type="primary" @click="onSubmit">确定</a-button>
  </a-drawer>
</template>
<script setup lang="ts">
  import { ref, watch, defineEmits, Ref } from 'vue';
  import { DataTree } from '../type/index';
  import { getinterFace } from '@/api/test/interFace';
  //   import { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
  //弹窗控制
  const visible = ref<boolean>(false);
  const afterVisibleChange = (bool: boolean) => {
    console.log('visible', bool);
    visible.value = true;
  };
  const onClose = () => {
    visible.value = false;
  };
  const onSubmit = () => {
    visible.value = false;
  };
  //接收父组件数据
  const props = defineProps({
    selectList: {
      type: String,
      default: () => {
        return;
      },
    },
  });

  //树形结构
  const expandedKeys = ref<string[]>([]);
  const searchValue = ref<string>('');
  const autoExpandParent = ref<boolean>(true);
  //分类接口
  const treeData = ref<DataTree[]>([]);
  getinterFace().then((res: { data: any }) => {
    treeData.value = res.data;
  });
  //展开树形结构
  const onExpand = (keys: string[]) => {
    expandedKeys.value = keys;
    autoExpandParent.value = false;
  };
</script>
<style lang="less" scoped>
  .tree {
    border: 1px solid rgb(230, 224, 224);
    width: 100%;
    height: 100%;
  }
</style>
